<template>

  <div>
    <div>
      <img src="../../img/1.png" style="width:200px;height:100px;margin-top: 30px;margin-left: 140px">
      <img src="../../img/2.png" style="width:200px;height:100px;margin-top: 30px;margin-left: 100px">
      <img src="../../img/3.png" style="width:200px;height:100px;margin-top: 30px;margin-left: 100px">
      <img src="../../img/4.png" style="width:200px;height:100px;margin-top: 30px;margin-left: 100px">
    </div>
    <div>
      <span style="margin-left: 145px"><font><strong>全部订单</strong></font></span>
      <span  style="margin-left: 100px"><font><strong>{{orderData.allOrder}}</strong></font></span>
      <span style="margin-left: 115px"><font><strong>已完成</strong></font></span>
      <span  style="margin-left: 125px"><font><strong>{{orderData.finishedOrder}}</strong></font></span>
      <span style="margin-left: 120px"><font><strong>运输中</strong></font></span>
      <span  style="margin-left: 115px"><font><strong>{{orderData.transitOrder}}</strong></font></span>
      <span style="margin-left: 130px"><font><strong>待运输</strong></font></span>
      <span  style="margin-left: 100px"><font><strong>{{orderData.waitSendOrder}}</strong></font></span>
    </div>

     <el-row>
       <el-col :span="12">
         <div id="main" style="width: 600px; height: 400px;margin-left: 100px;margin-top: 60px"></div>
       </el-col>
       <el-col :span="12">
         <div id="pieMain" style="width: 600px; height: 400px;margin-left: 80px;margin-top: 100px"></div>
       </el-col>
       <el-col :span="12">
         <div style="margin-left: 300px;font-size: 18px"><strong>运费排行榜</strong></div>
       </el-col>
       <el-col :span="12">
         <div style="margin-left: 320px;font-size: 18px"><strong>订单总量排行榜</strong></div>
       </el-col>

     </el-row>

  </div>

</template>
<script>
import * as echarts from 'echarts';
  export default {
    data(){
      return{
        orderData:[],
      }
    },
    created() {
      this.show();
    },
    mounted() {

      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line'
          },
          {
            data: [],
            type: 'bar'
          },
        ]
      };
      this.axios.get("http://localhost:8080/findIndex/findTotal").then(
          res=>{

            option.xAxis.data = res.data.data.x
            option.series[0].data=res.data.data.y
            option.series[1].data=res.data.data.y
            myChart.setOption(option);
          }
      )





      var pieDom = document.getElementById('pieMain');
      var myChartPie = echarts.init(pieDom);
      var pieOption;

      pieOption = {
        title: {
          text: '地区货运量',
          subtext: 'Order Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 5, name: '上海市' },
              { value: 7, name: '北京市' },
              { value: 2, name: '四川省' },
              { value: 1, name: '陕西省' },
              { value: 9, name: '广东省' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      myChartPie.setOption(pieOption);

    },
    methods:{

      show(){
        this.axios.get("http://localhost:8080/findIndex").then(
            res =>{
              this.orderData = res.data.data;
            }
        )
      }

    }
  }


</script>
<style>

</style>